<script setup lang="ts">
import { ref } from "vue";
// import ReCol from "@/components/ReCol";
// import { formRules } from "./utils/rule";
import { UserFormProps } from "./utils/types";

const props = withDefaults(defineProps<UserFormProps>(), {
  formInline: () => ({
    distributionUser: [],
    noDistributionUser: []
  })
});

const userRuleFormRef = ref();
// const { switchStyle } = usePublicHooks();
const newFormInline = ref(props.formInline);

function getRef() {
  return userRuleFormRef.value;
}

const filterMethod = (query, item) => {
  return item.initial.includes(query);
};

defineExpose({ getRef });
</script>

<template>
  <div class="container">
    <el-transfer
      ref="userRuleFormRef"
      v-model="newFormInline.distributionUser"
      filterable
      :filter-method="filterMethod"
      filter-placeholder="请输入名字进行搜索"
      :data="newFormInline.noDistributionUser"
      :titles="['未分配用户', '已分配用户']"
    />
  </div>
</template>

<style scoped>
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
</style>
